iT邦幫忙

2024 iThome 鐵人賽

DAY 25
0
JavaScript

PM說: RD大大,這個功能要怎麼寫啊?系列 第 25

PM 說: 可以用網頁實現機上盒的 App 操作 UI 嗎?

  • 分享至 

  • xImage
  •  

hero

前言

現在智慧電視越來越普遍
封面圖是智慧電視的作業系統UI

標題說的機上盒英文是 set-top box (STB)
=>可理解成它是一台小小電腦(普遍都是安裝類似 Android 的作業系統)
可以安裝 Netflix, 愛奇藝, Disney+, Youtube ...etc 看影片的應用程式

在上面都是使用遙控器來操作UI,和一般網頁操作邏輯差很多的!
基本上不太會看到需要填表單的功能(試想在一個沒有語音功能的遙控器上填寫資料...)
/images/emoticon/emoticon21.gif

今天來做2個demo

  1. 在網頁上模擬遙控器操作(使用鍵盤)
  2. focus 效果

成果

demo1 電腦網頁用方向鍵控制UI
可以看到下圖有兩個框框

  • 黑色: 在鍵盤按下tab會選到畫面上第一個DOM元素,而button預設focus是黑色
  • 紅色: 這個是點了鍵盤方向鍵後透過keydown事件判斷選了哪個按鈕,加上class來改變顏色
    demo-keydown

demo2 網頁UI被選取的效果

//認識基本規則
1.對網頁按下 tab 鍵 => 抓取第一個DOM => 出現focus效果
2.遙控器方向鍵
    - 右: 相當於按下 `tab` => 抓同列的下個DOM => 出現focus效果
    - 左: 相當於按下 `shift` + `tab` => 抓同列的上個DOM => 出現focus效果
    - 下: 抓下一列DOM的第一個 => 出現focus效果
    - 上: 抓上一列DOM的第一個 => 出現focus效果

demo-focus

改顏色只要規範好focus的border即可產生效果

      button:focus {
        border: 10px solid rgb(255, 153, 0);
      }

補充範例1重點

  1. 宣告一個currentFocusIndex紀錄當前 位置在哪
  2. 透過keydown事件監聽鍵盤,處理方式如下
  • 移除 focus 的className focused
  • 當為上下左右時算出currentFocusIndex,改值
  • 並給予正確的DOM元素 focused
buttons[currentFocusIndex].classList.add("focused");

程式碼

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>TV</title>
    <style>
      .focusable-button {
        padding: 70px;
        margin: 15px;
        background-color: #333;
        color: #fff;
        border: 2px solid transparent;
        font-size: 10rem;
        border: 10px solid #ffffff;
      }

      .focusable-button.focused {
        border: 10px solid #f00;
      }
    </style>
  </head>
  <body>
    <h2>方向鍵選擇 DOM</h2>
    <pre>
      請用電腦版測試,按下鍵盤方向鍵
  </pre>    
    <button class="focusable-button" onclick="alert(1)">1</button>
    <button class="focusable-button" onclick="alert(2)">2</button>
    <button class="focusable-button" onclick="alert(3)">3</button>
    <br />
    <button class="focusable-button" onclick="alert(4)">4</button>
    <button class="focusable-button" onclick="alert(5)">5</button>
    <button class="focusable-button" onclick="alert(6)">6</button>

    <script>
      let currentFocusIndex = 0;
      const buttons = document.querySelectorAll(".focusable-button");
      main();

      function main() {
        document.addEventListener("keydown", function (event) {
          switch (event.key) {
            case "ArrowUp":
              // 處理上方向鍵的邏輯
              moveFocus("up");
              break;
            case "ArrowDown":
              // 處理下方向鍵的邏輯
              moveFocus("down");
              break;
            case "ArrowLeft":
              // 處理左方向鍵的邏輯
              moveFocus("left");
              break;
            case "ArrowRight":
              // 處理右方向鍵的邏輯
              moveFocus("right");
              break;
            case "Enter":
              // 處理確認鍵邏輯 (選中當前焦點元素)
              activateButton();
              break;
          }
        });
      }

      function moveFocus(direction) {
        buttons[currentFocusIndex].classList.remove("focused");

        switch (direction) {
          case "up":
            if (currentFocusIndex >= 3 && currentFocusIndex <= 5) {
              currentFocusIndex -= 3;
            }
            break;
          case "down":
            if (currentFocusIndex <= 2 && currentFocusIndex >= 0) {
              currentFocusIndex += 3;
            }
            break;
          case "left":
            currentFocusIndex = Math.max(currentFocusIndex - 1, 0);
            break;
          case "right":
            currentFocusIndex = Math.min(
              currentFocusIndex + 1,
              buttons.length - 1
            );
            break;
        }

        buttons[currentFocusIndex].classList.add("focused");
      }

      function activateButton() {
        buttons[currentFocusIndex].click();
      }
    </script>
  </body>
</html>


上一篇
PM 說: 很常在網頁上看到線條粒子特效的背景是哪個套件?
下一篇
前端工程師說: 可以推薦用 js 寫爬蟲的套件嗎?
系列文
PM說: RD大大,這個功能要怎麼寫啊?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言